<button (click)="selectDashboard(dashboard.id)" class="dashboard-card my-mat-card box-shadow" mat-button>
  <div class="dashboard-card-settings-button-wrapper">
    <button (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu" class="dashboard-settings-button"
            mat-icon-button>
      <mat-icon>more_vert</mat-icon>
    </button>
  </div>
  <div class="overflow-ellipsis">
    <mat-icon class="dashboard-icon">dashboard</mat-icon>
    <br>
    {{dashboard.title}}
    <br><br>
    <span *ngIf="creator$ | async; let creator" class="dashboard-card-created-by">
        {{'dashboard-card.created-by' | translate}} {{creator.surname}} , {{creator.givenName}}
      </span>
  </div>
</button>

<mat-menu #menu="matMenu">
  <span>
      <button (keydown)="$event.stopPropagation()" mat-menu-item
              routerLink="/dashboard/{{dashboard.id}}/edit-dashboard">
        <mat-icon>edit</mat-icon>
        <span>{{'dashboard-card.edit-dashboard' | translate}}</span>
      </button>
  </span>
  <span>
      <button (click)="deleteDashboard.next(dashboard)" mat-menu-item>
        <mat-icon>delete</mat-icon>
        <span>{{'dashboard-card.delete-dashboard' | translate}}</span>
      </button>
  </span>
</mat-menu>
